<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Airwallex Checkout Playground</title>
    <!-- STEP #1: Import airwallex-payment-elements bundle -->
    <script src="https://checkout.airwallex.com/assets/elements.bundle.min.js"></script>
  </head>
  <body>
    <h1>DropIn integration</h1>
    <!-- STEP #3: Add an empty container for the dropIn element to be injected into -->
    <div id="dropIn"></div>
    <script>
      // STEP #2: Initialize the Airwallex global context for event communication
      Airwallex.init({
        env: 'demo', // Setup which Airwallex env('staging' | 'demo' | 'prod') to integrate with
        origin: window.location.origin, // Setup your event target to receive the browser events message
      });
      // STEP #4: Create 'dropIn' element
      const dropIn = Airwallex.createElement('dropIn', {
        // Required, dropIn use intent Id and client_secret to prepare checkout
        intent_id: 'replace-with-your-intent-id',
        client_secret: 'replace-with-your-client-secret',
        currency: 'replace-with-your-intent-currency',
        // if you want to use apple pay, please pass merchant country code in applePayRequestOptions
        applePayRequestOptions: {
          countryCode: 'replace-with-your-country-code',
        },
        // if you want to use google pay, please pass merchant country code in googlePayRequestOptions
        googlePayRequestOptions: {
          countryCode: 'replace-with-your-country-code',
        },
      });
      // STEP #5: Mount 'dropIn' element
      const domElement = dropIn.mount('dropIn');

      // STEP #6: Add an event listener to handle events when the element is mounted
      domElement.addEventListener('onReady', (event) => {
        /*
          ... Handle event
        */
        window.alert(event.detail);
      });

      // STEP #7: Add an event listener to handle events when the payment is successful.
      domElement.addEventListener('onSuccess', (event) => {
        /*
          ... Handle event on success
        */
        window.alert(event.detail);
      });

      // STEP #8: Add an event listener to handle events when the payment has failed.
      domElement.addEventListener('onError', (event) => {
        /*
          ... Handle event on error
        */
        console.log(event.detail);
      });
    </script>
  </body>
</html>